<div ng-controller="roleManageCtrl">
    <ol class="breadcrumb">
        <li><a href="javascript:void(0)">系统管理</a></li>
        <li>角色管理</li>
    </ol>
    <div class="content-container">
        <div class="query">
            <div class="row">
                <form>
                    <div class="col-lg-2">
                        <div class="input-group input-group-sm">
                            <input type="text" class="form-control" ng-model="conditions.rolename" placeholder="角色名称">
                        </div>
                    </div>
                    <div class="col-lg-1">
                        <div class="input-group input-group-sm text-right">
                            <button class="btn btn-primary query-btn" ng-click="query()">查询</button>
                        </div>
                    </div>
                    <div class="col-lg-1">
                        <div class="input-group input-group-sm text-right">
                            <button class="btn btn-success query-btn" ng-click="add()">添加</button>
                        </div>
                    </div>
                    <div class="col-lg-1 pull-right">
                        <div class="input-group input-group-sm pull-right">
                            <button class="btn btn-default btn-sm pull-right" ng-click="clearQuery()">
                                <span class="glyphicon glyphicon-remove text-danger"></span>清除
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="row page-result" ng-show="data.length > 0">
            <div class="col-lg-6">
                符合您的查询结果共有
                <label class="text-danger" ng-bind="total"></label>条
            </div>
            <div class="col-lg-6">
                <div class="pagination-size">
                    <select ng-change="changePageSize()" class="form-control input-sm" ng-options="option.name for option in page_size_arr track by option.value" ng-model="page_size">
                    </select>
                </div>
                <ul uib-pagination total-items="total" ng-model="role.page" max-size="5" class="pagination-sm pull-right" boundary-link-numbers="true" previous-text="上一页" next-text="下一页" items-per-page="role.rows" ng-change="query()"></ul>
            </div>
        </div>
        <div class="datagrid">
            <table class="table table-bordered" ng-show="data.length > 0">
                <tr>
                    <th style="width:5%;">序号</th>
                    <th style="width:60%;">角色名称</th>
                    <th style="width:20%;">操作</th>
                </tr>
                <tr ng-repeat="role in data" ng-click="selectRow(role)" ng-class="{'bg-info' : role.selected}">
                    <td>{{role.number}}</td>
                    <td>{{role.rolename}}</td>
                    <td>
                        <button class="btn btn-success btn-sm" ng-click="update(key.id)">修改</button>
                        <button class="btn btn-danger btn-sm" ng-click="delete(key.id)">删除</button>
                        <button class="btn btn-primary btn-sm" ng-click="detail(key.id)">详情</button>
                    </td>
                </tr>
            </table>
            <div ng-show="data.length == 0" class="alert alert-warning">
                <span class="glyphicon glyphicon-info-sign"></span>&nbsp;查无相关数据，请重新查询！
            </div>
        </div>
    </div>
    <div alert title="alert.title" content="alert.content" open="alert.open"></div>
</div>
<!-- end controller -->
<!-- 新增窗口 -->
<script type="text/ng-template" id="add.html">
    <div class="modal-header">
        <button type="button" class="close" ng-click="cancel()"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h3 class="modal-title" id="modal-title">新增</h3>
    </div>
    <form name="add_form" novalidate>
        <div class="modal-body" id="modal-body">
            <uib-accordion close-others="true">
                <div uib-accordion-group class="panel panel-default" is-open="status.info_open" template-url="group-template.html" >
                    <uib-accordion-heading>基本信息
                        <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.info_open, 'glyphicon-chevron-right': !status.info_open}"></i>
                    </uib-accordion-heading>
                    <div class="form-horizontal">
                        <div class="form-group">
                            <div class="col-sm-12">
                                <label class="col-sm-2 remove-padding control-label"><span class="text-require">*</span>角色名称：
                                </label>
                                <div class="col-sm-10">
                                    <input type="text" name="name" class="form-control" ng-model="role.name" placeholder="角色名称" required>
                                    <div ng-show="add_form.name.$dirty && add_form.name.$invalid" class="invalid">
                                        <span ng-show="add_form.name.$error.required">请填写角色名称</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div uib-accordion-group class="panel panel-default" is-open="status.authority_open" template-url="group-template.html">
                    <uib-accordion-heading>权限授权
                        <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.authority_open, 'glyphicon-chevron-right': !status.authority_open}"></i>
                    </uib-accordion-heading>
                    <div class="form-group user-role">
                        <div class="col-sm-12 bg-warning remove-padding" ng-repeat="authority in authority_list">
                            <div class="col-sm-12 select-box-first">
                                <div class="select-list">   
                                    <div class="select-box" ng-click="toggle(authority)">
                                        <span ng-class="{'unselect': !authority.checked, 'select': authority.checked}" ></span>
                                    </div>
                                    <span ng-click="toggle(authority)">{{authority.name}}</span>
                                </div>
                            </div>
                            <div class="col-sm-12 bg-white remove-padding select-box-second">
                                <div class="col-sm-3" ng-repeat="child in authority.children">
                                    <div class="select-list">
                                        <div class="select-box" ng-click="toggleChild(child,authority)">
                                            <span ng-class="{'unselect': !child.checked, 'select': child.checked}" ></span>
                                        </div>
                                        <span ng-click="toggleChild(child,authority)">{{child.name}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </ui-accordion>
        </div>
        <div class="modal-footer">
            <button ng-disabled="add_form.$invalid || not_authority" class="btn btn-primary" type="button" ng-click="ok()">确定</button>
            <button class="btn btn-default" type="button" ng-click="cancel()">取消</button>
        </div>
    </form>
</script>
<!-- 修改窗口 -->
<script type="text/ng-template" id="update.html">
    <div class="modal-header">
        <button type="button" class="close" ng-click="cancel()"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h3 class="modal-title" id="modal-title">修改</h3>
    </div>
    <form name="update_form" novalidate>
        <div class="modal-body" id="modal-body">
            <uib-accordion close-others="true">
                <div uib-accordion-group class="panel panel-default" is-open="status.info_open" template-url="group-template.html">
                    <uib-accordion-heading>基本信息
                        <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.info_open, 'glyphicon-chevron-right': !status.info_open}"></i>
                    </uib-accordion-heading>
                    <div class="form-horizontal">
                        <div class="form-group">
                            <div class="col-sm-12">
                                <label class="col-sm-2 remove-padding control-label"><span class="text-require">*</span>角色名称：</label>
                                <div class="col-sm-10">
                                    <input type="text" name="name" class="form-control" ng-model="role.name" placeholder="角色名称" required>
                                    <div ng-show="update_form.name.$dirty && update_form.name.$invalid" class="invalid">
                                        <span ng-show="update_form.name.$error.required">请填写角色名称</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div uib-accordion-group class="panel panel-default" is-open="status.authority_open" template-url="group-template.html">
                    <uib-accordion-heading>权限授权
                        <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.authority_open, 'glyphicon-chevron-right': !status.authority_open}"></i>
                    </uib-accordion-heading>
                    <div class="form-group user-role">
                        <div class="col-sm-12 m-b-1 bg-warning remove-padding" ng-repeat="authority in authority_list">
                            <div class="col-sm-12 select-box-first">
                                <div class="select-list">   
                                    <div class="select-box" ng-click="toggle(authority)">
                                        <span ng-class="{'unselect': !authority.checked, 'select': authority.checked}" ></span>
                                    </div>
                                    <span ng-click="toggle(authority)">{{authority.name}}</span>
                                </div>
                            </div>
                            <div class="col-sm-12 bg-white remove-padding select-box-second">
                                <div class="col-sm-3" ng-repeat="child in authority.children">
                                    <div class="select-list">
                                        <div class="select-box" ng-click="toggleChild(child,authority)">
                                            <span ng-class="{'unselect': !child.checked, 'select': child.checked}" ></span>
                                        </div>
                                        <span ng-click="toggleChild(child,authority)">{{child.name}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </ui-accordion>
        </div>
        <div class="modal-footer">
            <button ng-disabled="update_form.$invalid || not_authority" class="btn btn-primary" type="button" ng-click="ok()">确定</button>
            <button class="btn btn-default" type="button" ng-click="cancel()">取消</button>
        </div>
    </form>
</script>
<!-- accordion heading模板 -->
<script type="text/ng-template" id="group-template.html">
    <div class="panel panel-default">
        <div class="panel-heading" ng-click="toggleOpen()">
            <h4 class="panel-title" >
          <a href tabindex="0" class="accordion-toggle" uib-accordion-transclude="heading">
            <span uib-accordion-header>
              {{heading}}
            </span>
          </a>
        </h4>
        </div>
        <div class="panel-collapse collapse" uib-collapse="!isOpen">
            <div class="panel-body" ng-transclude>
                
            </div>
        </div>
    </div>
</script>
